<template>
  <div class="box">
    <h2>1子组件</h2>
    值：<label>{{count}}</label>
    <br>
    <button @click="addCount(1)">值 +1</button>
    <button @click="addCount(5)">值 +5</button>
    <button @click="changeTiele">更改标题</button>
    <button @click="changeHandle">一秒更改数值为111</button>
    <hr>
    <div>{{ $store.state.list }}</div>
    <div>{{ $store.getters.filterList }}</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['addCount']),
    /* countAdd (n) {
      this.addCount(n)
    }, */
    changeTiele () {
      this.$store.commit('cTietl', {
        oldName: 'smalltitle',
        msg: 'aaa'
      })
    },
    changeHandle () {
      // 调用action

      // dispatch
      this.$store.dispatch('changeHandleSluggish', 111)
    }

    /*     countAddd () {
      this.$store.commit('addCountt')
    } */
  },
  computed: {
    ...mapState(['count'])

  }

}
</script>

<style>
  .box{
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
  }
  h2{
    margin-top: 10px;
  }
</style>
